<!--D音无痕（cookie）发布——该页面暂未使用-->
<template>
  <div class="ele-body">
    <!--hide-required-asterisk:是否隐藏必填字段的标签旁边的红色星号-->
    <el-form
      ref="form"
      :show-message="false"
      :model="form"
      :rules="rules"
      label-width="110px"
      @keyup.enter.native="submit"
      @submit.native.prevent>
      <el-card shadow="never">
        <div class="tiktok-title">D音cookie发布</div>
        <el-row :gutter="15" type="flex" justify="space-between">
<!--          <el-col :lg="8" :md="10">-->
          <el-col :lg="12" :md="12">
            <el-form-item label="任务名称" prop="name" class="m-top10">
              <el-input
                style="width: 66%;"
                v-model="form.name"
                placeholder="请输入任务名称"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :lg="11" :md="11">
            <el-steps :active="stepsActive" class="ele-steps-horizontal">
              <el-step title="第一步" description="选择素材、文案与挂载" />
              <el-step title="第二步" description="发布配置" />
            </el-steps>
          </el-col>
        </el-row>
      </el-card>
      <div class="m-top15" v-show="stepsActive==0">
        <el-card shadow="never">
          <div class="fit-title">选择素材</div>
          <div class="flex-align-center d-margin">
            <div v-for="(i,j) in materialType" :key="j" :class="(Number(form.materialType)-1) == j ? 'sel-title-class' : 'title-class'" class="pointer" @click="materialTypeClick(j)">
              {{i.name}}
            </div>
          </div>
          <!--<el-form-item label="剪辑类型" prop="montageType" v-if="form.materialType==1">
            <el-radio-group v-model="form.montageType" @input="projectInit">
              <el-radio :label="2">口播剪辑</el-radio>
              <el-radio :label="1">AI剪辑</el-radio>
              <el-radio :label="3">图文剪辑</el-radio>
            </el-radio-group>
          </el-form-item>-->
          <el-form-item label="文件夹" prop="projectName" class="check-star"
                        :rules="!form.projectName  ? { required: true, message: '请选择文件夹', trigger: ['blur','change']} : {required: false}"
                        v-if="form.materialType==1">
            <div style="width: 30%;">
              <activities ref="connected" :dataInfo="form" @getData="getData" :hint="hint"></activities>
            </div>
          </el-form-item>

          <el-form-item label="文件夹" prop="videoMaterialId"
                        :rules="!form.videoMaterialId  ? { required: true, message: '请选择文件夹', trigger: ['blur','change']} : {required: false}"
                        v-if="form.materialType==2">
            <el-select
              style="width: 30%;"
              v-model="form.material"
              placeholder="请选择文件夹"
              class="ele-block"
              clearable
              @change="selectMaterial"
            >
              <el-option :label="i.name" :value="i" v-for="(i,j) in cameraList" :key="j" />
            </el-select>
          </el-form-item>
        </el-card>
        <el-card shadow="never">
          <div class="fit-title">选择文案</div>
          <el-row :gutter="15" class="flex-wrap">
            <el-col :span="12">
              <el-form-item label="SEO文案" prop="seoName"
                            :rules="!form.seoName  ? { required: true, message: '请选择文案', trigger: ['blur','change']} : {required: false}">
                <!--SEO文案-->
                <div style="width: 66%;">
                  <acties ref="seoActies" :lists="seoList" @getData="selectCopy"></acties>
                </div>
                <!--<el-select
                  style="width: 66%;"
                  v-model="form.seoName"
                  placeholder="请选择文案"
                  class="ele-block"
                  clearable
                  @change="selectCopy"
                >
                  <el-option :label="i.taticsName" :value="i" v-for="(i,j) in seoList" :key="j" />
                </el-select>-->
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="@用户" prop="aite">
                <div style="width: 66%;">
                  <userPage ref="user" :lists="userList" @getData="selUser"></userPage>
                </div>
                <!--<el-select
                  style="width: 66%;"
                  v-model="form.aiteNickname"
                  placeholder="请选择用户"
                  class="ele-block"
                  clearable
                  @change="selUser"
                >
                  <div v-for="(i,j) in userList" :key="j">
                    <el-option :label="i.nickname" :value="i" />
                  </div>
                </el-select>-->
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>
        <el-card shadow="never">
          <div class="fit-title">选择挂载</div>
          <el-form-item label="挂载类型" prop="linkType">
            <el-radio-group v-model="form.linkType">
              <el-radio :label="1">商家POI</el-radio>
              <el-radio :label="2">小程序</el-radio>
              <el-radio :label="3">橱窗挂载</el-radio>
              <el-radio :label="0">不挂载</el-radio>
            </el-radio-group>
          </el-form-item>
          <!-- no-check-star ： 去除form表单校检‘星号’-->
          <el-row :gutter="15" class="flex-wrap no-check-star">
            <!--小程序-->
            <el-col :span="12" v-if="form.linkType==2 ">
              <!--非h5传anchorUrl(挂载小程序地址)，否则传全部-->
              <el-form-item label="小程序地址" prop="anchorUrl">
                <el-input
                  style="width: 66%;"
                  class="in-append"
                  type="text"
                  v-model="form.anchorUrl"
                  placeholder="请输入小程序地址"
                  clearable>
                </el-input>
              </el-form-item>
              <!--接口需加字段 start-->
              <el-form-item label="小程序标题" prop="anchorTitle">
                <el-input
                  style="width: 66%;"
                  class="in-append"
                  type="text"
                  v-model="form.anchorTitle"
                  placeholder="请输入小程序标题"
                  clearable>
                </el-input>
              </el-form-item>
              <el-form-item label="小程序id" prop="anchorId">
                <el-input
                  style="width: 66%;"
                  class="in-append"
                  type="text"
                  v-model="form.anchorId"
                  placeholder="请输入小程序id"
                  clearable>
                </el-input>
              </el-form-item>
              <!--end-->
            </el-col>
            <!--橱窗挂载-->
            <el-col :span="12" v-if="form.linkType==3">
              <el-form-item label="商品地址" prop="promotionLink">
                <el-input
                  style="width: 66%;"
                  class="in-append"
                  type="text"
                  v-model="form.promotionLink"
                  placeholder="请输入商品地址"
                  clearable>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12" v-if="form.linkType==3">
              <el-form-item label="商品标题" prop="elasticTitle">
                <el-input
                  style="width: 66%;"
                  class="in-append"
                  type="text"
                  v-model="form.elasticTitle"
                  placeholder="请输入橱窗商品短标题"
                  clearable>
                </el-input>
              </el-form-item>
            </el-col>
            <!--商家POI-->
            <el-col :span="12" v-if="form.linkType==1">
              <el-form-item label="城市">
                <regions-select
                  @input="selectCity"
                  style="width: 66% !important;"
                  v-model="provinceCity"
                  placeholder="请选择省市"
                  type="provinceCity"
                  class="ele-fluid"
                />
              </el-form-item>
              <el-form-item label="商家简称">
                <el-input
                  @input="referred"
                  style="width: 66%;"
                  class="in-append"
                  type="text"
                  v-model="merchantName"
                  placeholder="请输入商家简称"
                  clearable>
                  <el-button slot="append" icon="el-icon-search" @click="seachPoi" :loading="loading"></el-button>
                </el-input>
              </el-form-item>
              <el-form-item label="POI地址" prop="poiName"
                            :rules="!form.poiName  ? { required: true, message: '请选择POI地址', trigger: ['blur','change']} : {required: false}">
               <!-- <div style="width: 66%;">
                  <poiPage ref="poiAddress" :lists="poiList" @getData="addressPoi" @loadClose="loadClose"></poiPage>
                </div>-->
                <el-select
                  style="width: 66%;"
                  v-model="form.poiName"
                  placeholder="请输入城市和商家简称搜索可加载"
                  class="ele-block"
                  clearable
                  @change="addressPoi"
                >
                  <div v-for="(i,j) in poiList" :key="j">
                    <el-option :label="i.address" :value="i" />
                  </div>
                  <el-button type="text" style="padding:10px 20px ;color: #409EFF" @click="lookMore()" :loading="loading" v-if="nextStep!=-1">查看更多</el-button>
                  <div v-else class="m-out">已经到底了~</div>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <div class="m-left10">
            <el-button type="primary" @click="stepsNext">
              下一步
            </el-button>
          </div>
        </el-card>
      </div>
      <div class="m-top15" v-show="stepsActive==1">
        <el-card shadow="never">
          <div class="fit-title">选择配置</div>
          <el-form-item label="发布时间" prop="publishTimeType">
            <el-radio-group v-model="form.publishTimeType">
              <el-radio :label="1">随机</el-radio>
              <el-radio :label="2">指定</el-radio>
            </el-radio-group>
          </el-form-item>
          <!--随机-->
          <el-row :gutter="100" v-if="form.publishTimeType==1" class="delInput">
            <el-col :span="18" class="flex-between">
              <el-form-item label="开始发布日期" prop="startDate">
                <el-date-picker
                  style="width: 300px;"
                  v-model="form.startDate"
                  :picker-options="pickerOptions"
                  type="date"
                  placeholder="请选择发布时间"
                  @change="selTime">
                </el-date-picker>
              </el-form-item>
              <el-form-item label="每天发布数量" prop="dayCount">
                <el-input
                  type="number"
                  min="1"
                  style="width: 300px;"
                  v-model.number="form.dayCount"
                  placeholder="请输入发布数量"
                  @input="numInput"
                  clearable
                />
              </el-form-item>
            </el-col>
            <el-col :span="18" class="flex-between">
              <el-form-item label="发布天数" prop="publishDays">
                <!--最多7天-->
                <el-input
                  type="number"
                  max="7"
                  min="1"
                  style="width: 300px;"
                  v-model.number="form.publishDays"
                  placeholder="请输入天数"
                  @input="dayInput"
                  clearable
                />
              </el-form-item>
              <el-form-item label="账户分组" prop="accountGroupName">
                <el-select
                  style="width: 300px;"
                  v-model="form.accountGroupName"
                  placeholder="请选择账号分组"
                  class="ele-block"
                  clearable
                  @change="accountGroup"
                >
                  <div v-for="(i,j) in groupList" :key="j">
                    <el-option :label="i.groupName" :value="i" />
                  </div>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="18">
              <el-form-item label="发布账户" class="check-star">
                <el-transfer :props="{key: 'id',label: 'nickname'}" :titles="['未选择账户列表','已选择账户列表']" class="transfer-class" v-model="value" :data="accounts" @change="transferChange">
                  <!--数据项添加'头像'图片 -->
                  <span slot-scope="{ option }" class="flex-align-center"><img :src="option.head" class="transfer-img" /><div class="transfer-name">{{ option.nickname }}</div></span>
                </el-transfer>
              </el-form-item>
            </el-col>
          </el-row>
          <div v-if="form.publishTimeType==2">
            <el-form-item label="选择账户" class="check-star">
              <el-button type="primary" @click="selectAccount">请选择账户</el-button>
            </el-form-item>
            <!--“已选择账户” 展示-->
            <div class="flex-wrap">
              <div class="account-all" v-for="(i,j) in accountList" :key="j">
                <div class="account-msg flex-column">
                  <img :src="i.head">
                  <div class="font-overflow">{{i.nickname}}</div>
                </div>
                <!--pulishtime：null 未指定-->
                <div class="is-appoint">{{i.time ? '已指定' : '未指定'}}</div>
                <!-- trigger="click" 点击激活 去除则是hover-->
                <el-dropdown class="dropdown-class">
                  <i class="el-icon-more"></i>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item style="color: #1E6CEB;text-align: center" @click.native="specifyTime(j)">指定时间</el-dropdown-item>
                    <el-dropdown-item style="color: #FF4636;text-align: center" :divided="true" @click.native="delTime(j)">删除</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </div>
            </div>
          </div>
          <div class="m-confirm">
            <el-button type="primary" @click="stepsPrev">上一步</el-button>
            <el-button type="primary" @click="confirm" :loading="loading">确认提交</el-button>
          </div>
        </el-card>
      </div>
    </el-form>
    <!-- 指定状态——选择账户 -->
    <select-account ref="account" :visible.sync="isSelectAccount" :groupList="groupList" @account="accountClick"></select-account>
    <sel-time ref="timeShow" :list="accountList[timeIndex]" @timeClick="timeClick"></sel-time>
  </div>
</template>
<script>
  import activities from '@/components/activities/connected-activities'
  import userPage from '@/components/pagination/user-page'
  import poiPage from '@/components/pagination/poi-page'
  import acties from '@/components/pagination/activities'
  import RegionsSelect from '@/components/RegionsSelect/index.vue';
  import selectAccount from "./components/select-account";
  import selTime from "./components/sel-time";
  import {projectPage} from "@/api/creatCenter/authoringClips";
  import {listUserFiles, publicFile} from "@/api/creatCenter/material";
  import {querySeo} from "@/api/matrixManage/seo";
  import {queryGroup} from "@/api/matrixManage/groupManage";
  import {accountQuery} from "@/api/matrixManage/accountList";
  import {dyPoi, publishCreate, publishAdd, dyCommentList} from "@/api/releaseManage/tiktok"
  import {accreditPage} from "@/api/explosiveCode/follow";
  import {submitDiyJob, submitImageJob, submitProjectJob} from "@/api/explosiveCode/releaseActivity";
  export default {
    name: "index",
    components:{selectAccount, selTime, RegionsSelect, activities, acties, userPage, poiPage},
    data() {
      const generateData = _ => {
        const data = [];
        for (let i = 1; i <= 15; i++) {
          data.push({
            key: i,
            label: `备选项 ${ i }`,
            disabled: i % 4 === 0
          });
        }
        return data;
      };
      return {
        materialType: [
          {
            name:'云创作成片库',
            id:1
          },
          {
            name:'云闪推成片库',
            id:2
          }
        ],
        maxNum:0,  // 关联活动最大剪辑数量
        loading:false,
        // 日期设置对象
        pickerOptions: {
          disabledDate(time) {
            // return time.getTime() < Date.now() - 8.64e7;   //禁用以前的日期，今天不禁用
            return time.getTime() <= Date.now();    //禁用今天以及以前的日期
          }
        },
        dayData : ['7:00','7:30','8:00','8:30','9:00','9:30','10:00','10:30','11:00','11:30',
          '12:00','12:30','13:00','13:30','14:00','14:30','15:00','15:30','16:00','16:30',
          '17:00','17:30','18:00','18:30','19:00','19:30','20:00','20:30','21:00','21:30',
          '22:00','22:30','23:00','23:30','24:00'],
        timeIndex:-1,
        // 穿梭框 start
        data: generateData(),
        value: [],
        // end
        // 步骤条 进度
        stepsActive: 0,
        form:{
          // 云创作成片库/云闪推成片库，分类
          materialType:1,
          // 1.抖音h5 2.抖音无痕(cookid) 3.抖音代员工 4.快手
          types:2,
          // 发布时间 1.随机 2.指定
          publishTimeType: 1,
          // 挂载类型
          linkType:1,
        },
        // 挂载类型 用新的form表单校检，不展示必填*，未校检字段*：accountGroupName
        rules: {
          name: [
            {
              required: true,
              message: '请输入任务名称',
              trigger: 'blur'
            }
          ],
         /* projectName: [
            {
              required: true,
              message: '请选择文件夹',
              trigger: 'blur'
            }
          ],*/
          seoName: [
            {
              required: true,
              message: '请选择SEO文案',
              trigger: 'blur'
            }
          ],
          linkType: [
            {
              required: true,
              message: '请选择挂载类型',
              trigger: 'blur'
            }
          ],
          /* 挂载类型 content-start */

          //poi
          poiName: [
            {
              required: true,
              message: '请选择POI地址',
              trigger: 'blur'
            }
          ],

          //小程序
          anchorUrl: [
            {
              required: true,
              message: '请输入小程序地址',
              trigger: 'blur'
            }
          ],
          anchorTitle: [
            {
              required: true,
              message: '请输入小程序标题',
              trigger: 'blur'
            }
          ],
          anchorId: [
            {
              required: true,
              message: '请输入小程序id',
              trigger: 'blur'
            }
          ],

          //橱窗商品
          promotionLink: [
            {
              required: true,
              message: '请输入商品地址',
              trigger: 'blur'
            }
          ],
          elasticTitle: [
            {
              required: true,
              message: '请输入橱窗商品短标题',
              trigger: 'blur'
            }
          ],

          /* 挂载类型 content-end */

          publishTimeType: [
            {
              required: true,
              message: '请选择发布时间',
              trigger: 'blur'
            }
          ],
          /*随机 start*/
          startDate: [
            {
              required: true,
              message: '请选择开始时间',
              trigger: 'blur'
            }
          ],
          dayCount: [
            {
              required: true,
              message: '请输入每日发送数量',
              trigger: 'blur'
            }
          ],
          publishDays: [
            {
              required: true,
              message: '请输入发布天数',
              trigger: 'blur'
            }
          ],
          accountGroupName: [
            {
              required: true,
              message: '请选择账户分组',
              trigger: 'blur'
            }
          ],
          /*随机 end*/

        },
        ipLocation:'',
        // 穿梭框 右侧获取到的数组id
        rightList:[],
        // 是否选择账户
        isSelectAccount: false,
        // 列表数据
        dataList: [],
        list: [],
        initInfo:{
          username:this.$store.state.user.info.username,
          limit:10,
          page:1,
        },
        userList:[],
        dataForm:{
          types:1,  // types：1用户库 2关注我
          merchantId: this.$store.state.user.info.merchantId,
          limit:10,
          page:1,
        },
        seoInfo:{
          username:this.$store.state.user.info.username,
          limit:10,
          page:1,
          // seo 所属平台：1D音2K手3视频号
          platform:1
        },
        // seo 列表
        seoList:[],
        // 分组数据
        groupList: [],
        // 用户信息list
        accounts:[],
        // 省市
        provinceCity:'',
        //商家简称
        merchantName:'',
        // POI地址
        poiList:[],
        hint:'',
        selAccountList:[],  // 账号信息（随机类型）
        // 分组信息
        accountInfo:{},
        accountList:[],   // 账号信息（指定类型）
        uploadAccount:[],
        // 开始时间
        startDate:'',
        // 日期列表 (年月日)
        dateList:[],
        nextStep:'0'   // 是否有 “游标第一页”
      };
    },
    // 路由刷新
    activated() {
      this.$nextTick(() => {
        this.$refs['connected'].init()
      })
      // 之前都是放在created
      this.projectInit()
      this.seoInit()
      this.init()
      this.userInit()
    },
    created(){
    },
    methods: {
      // 切换 ‘类型’
      materialTypeClick(e){
        // 素材类型 1.云创作成片库 2.云闪推成片库
        this.form.materialType=this.materialType[e].id
        this.form.projectId=''
      },
      // 查询用户库
      userInit(){
        accreditPage(this.dataForm)
          .then((data) => {
            console.log("data",data)
            this.userList=data.list;
            this.$nextTick(()=>{
              this.$refs['user'].init()
            })
          })
          .catch((e) => {
            this.$message.error(e);
          });
      },
      getData(e){
        this.form.projectId=e.id //剪辑工程ID
        this.$set(this.form,'projectName',e.name) //剪辑工程名
        // this.maxNum=e.max
        // 剩余剪辑数量
        this.maxNum=e.countNumber
        // this.maxNum=e.max-e.montageCount
        // this.maxNum=e.max    展示剩余剪辑数量隐藏
        console.log("this.form=============",this.form)
      },
      // 账号信息
      accountClick(e,item){
        this.accountInfo=item
        this.accountList=e
        this.$refs['account'].clear()
      },
      // 指定时间click
      timeClick(e,showTime){
        //  this.accountList[this.timeIndex] 子组件选择的时间回显
        this.$set(this.accountList[this.timeIndex],'time',e)
        this.$set(this.accountList[this.timeIndex],'timeText',showTime)
      },

      // “指定时间” 删除
      delTime(index){
        console.log("index",index)
        this.$confirm('您确定要删除该账号吗？' , {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // 删除指定下标
          this.accountList.splice(index,1)
          this.$message.success('删除成功!');
        }).catch(() => {
          this.$message.info('已取消删除');
        });
      },
      // 指定时间click
      timeClick2(e){
        this.$set(this.accountList[this.timeIndex],'time',e)
        // 传入的指定时间赋值（修改）
        this.accountList[this.timeIndex].uploadAccount=allList
      },
      projectInit(){
        // 清空
        if(this.form.projectName){
          delete this.form.projectId     //剪辑工程ID
          delete this.form.projectName   //剪辑工程名
        }
        this.$nextTick(() => {
          this.$refs['connected'].init()
        })

        return

        Object.assign(this.initInfo, {
          // 1:脚本剪辑 2:自定义剪辑 3:图文剪辑
          type:this.form.montageType
        })
        // 活动名称
        projectPage(this.initInfo)
          .then((data) => {
            this.list=data.list;
            console.log("this.list",this.list)
          })
          .catch((e) => {
            this.$message.error(e);
          });
      },
      seoInit(){
        // if(this.form.seoName){
        //   delete this.form.seoName
        // }
        // 查询SEO文案【分页查询】 在查询列表页使用
        querySeo(this.seoInfo)
          .then((data) => {
            this.seoList=data.list
            this.$nextTick(()=>{
              this.$refs['seoActies'].init()
            })
          })
          .catch((e) => {
            this.$message.error(e);
          });
      },
      init(){
        // 初始化分组 this.initInfo
        queryGroup({
          username:this.$store.state.user.info.username,
          limit:10,
          page:1,
          groupType:2
        })
          .then((data) => {
            this.groupList=data.list
          })
          .catch((e) => {
            this.$message.error(e);
          });
      },
      //搜索poi地址(下一页需要传入‘游标’字段，注意修改
      seachPoi(){
        // 商家地址选择this.provinceCity[1],  0:省 1：市
        if(!this.provinceCity){
          this.$message.warning("请选择省市")
          return
        }
        if(!this.merchantName){
          this.$message.warning("请输入商家简称")
          return
        }
        this.loading=true
        this.nextStep='0'// 重新搜索则游标归0
        this.datasource(this.nextStep,10)
      },
      datasource(page, limit) {
        dyPoi(this.merchantName,this.provinceCity[1],page, limit)
          .then((data) => {
            this.loading=false
            if(this.nextStep==0){
              this.poiList=data.data.pois
              if(this.poiList.length<=0){
                return
              }
              this.form.poiName= this.poiList[0].address // 赋值poi地址
              this.form.poiId= this.poiList[0].poi_id  //POI ID
            }
            else{
              if(data.data.pois){
                this.poiList= [...this.poiList,...data.data.pois]
              }
            }
            /*has_more:是否有下一页
            cursor:游标第一页为0，后续页游标在响应数据中获取*/
            this.nextStep=data.data.has_more==false ? -1 : data.data.cursor
          })
          .catch((e) => {
            this.loading=false
            this.$message.error(e);
          });
      },
      // 查看更多
      lookMore(){
        this.loading=true
        this.datasource(this.nextStep,10)
      },
      // '商家简称' 搜索
      search(){

      },
      // 选择 视频素材
      selectVideo(e){
        this.form.projectId=e.id //剪辑工程ID
        this.form.projectName=e.name //剪辑工程名
        // this.form.projectName=e.name //剪辑工程名
      },
      // 选择文案
      selectCopy(e){
        console.log("选择文案e",e)
        this.form.seoId=e.id //SEO ID
        this.form.seoName=e.taticsName //SEO名称
      },
      // 选择用户
      selUser(e){
        console.log('选择用户=====',e)
        this.form.aite= e.id,
        this.form.aiteNickname= e.nickname
      },
      // 选择城市
      selCity(){

      },
      // 城市选择
      selectCity(e){
        console.log("城市选择e=====",e)
        this.clearPoi(1)
      },
      // 商家简称输入
      referred(e){
        console.log("商家简称输入=====",e)
        this.clearPoi(2)
      },

      // 清空POI地址
      clearPoi(type){
        // type 1:城市 2:商家简称
        if(this.form.poiId && type==1){  // 清空poi地址文本并清空poiId
          delete this.form.poiId
          if(this.provinceCity.length<=0){
            this.provinceCity='' // 清除城市文本，在搜索前提示
          }
          this.$set(this.form,'poiName','')
        }
        this.poiList=[]
        if(this.form.poiName){
          this.$message.warning("请重新搜索")
        }
        delete this.form.poiName // 清空poi地址文本 和poi地址list
      },
      // POI地址
      addressPoi(e){
        console.log("POI地址e",e,'e.address',e.address)
        this.form.poiId=e.poi_id  //POI ID
        this.$delete(this.form, 'poiName')
        this.$set(this.form,'poiName',e.address) //POI 名称
      },
      loadClose(){
        this.loading=false
      },
      // 选择发布时间
      selTime(e){
        this.startDate=e
        // msToDate: 中国标准时间转化为年月日
        this.form.startDate= this.$sun.msToDate(e)
      },
      // '穿梭框'右侧列表元素变化时触发
      transferChange(a) {
        // 账号数据置空，以免提交失败，重复赋值
        this.selAccountList=[]
        this.rightList=a
      },
      // '发布天数' 限制最多输入7天
      dayInput(){
        this.form.publishDays= this.form.publishDays>7 ? 7 : this.form.publishDays
      },
      // '每天发布数量' 限制最多输入35个时间端
      numInput(){
        this.form.dayCount= this.form.dayCount>35 ? 35 : this.form.dayCount
      },
      // 选择'账号分组'
      accountGroup(e){
        this.form.accountGroupName=e.groupName
        this.form.accountGroup=e.id
        this.query(e.id)
      },
      // 查询矩阵账号【分页查询】
      query(id){
        let parms = {
          username:this.$store.state.user.info.username,
          limit:10,
          page:1,
          type:1,  //账号类型 : 1D音2K手
          // authStatus:1, //授权状态:  0失效1正常
          groupId:id // 分组ID
        }
        accountQuery(parms)
          .then((data) => {
            this.accounts=data.list
            this.value=[]
          })
          .catch((e) => {
            this.$message.error(e);
          });
      },
      /* 上一步 */
      stepsPrev() {
        this.stepsActive--;
        if (this.stepsActive < 0) {
          this.stepsActive = 2;
        }
      },
      /* 下一步 */
      stepsNext() {
        this.stepsActive++;
        if (this.stepsActive > 2) {
          this.stepsActive = 0;
        }
      },
      /* "选择账户" 弹框 */
      selectAccount(){
        this.isSelectAccount = true
      },
      // “指定时间” 弹框
      specifyTime(index){
        this.timeIndex=index
        setTimeout(()=>{
          this.$refs['timeShow'].show()
        },200)
      },
      /* 确认提交 */

      confirm(){
        //循环右侧数据，根据右侧数据给出的key，嵌套循环原始数据(防止穿梭框传入左边时，出现的只增不减的问题)
        //找到原始数据对应的项，压入right数组
        for (let i = 0; i < this.rightList.length; i++) {
          this.accounts.forEach((item) => {
            if (item.id  == this.rightList[i]) {
              // 右侧穿梭框数据赋值(在结算是赋值右侧列表)
              this.selAccountList.push(item);
            }
          });
        }

        this.$refs.form.validate((valid, obj) => {
          for(let i in obj){
            this.hint=obj[i][0].message
            break
          }
          if (valid) {
            // 修改1
            if(!this.form.projectId){
              this.hint='请选择文件夹'
              this.$message.error(this.hint)
              return
            }
            // 获取指定时间的发布账号
            this.getAccount()

            // 发布账号数据
            // publishTimeType : 1,随机 2,指定
            // accountList：账号列表
            if(this.form.publishTimeType==1 && this.selAccountList.length<=0 || this.form.publishTimeType==2 && this.accountList.length<=0){
              this.$message.error('请选择发布账户')
              return
            }
            //  uploadAccount：指定时间总数组
            if( this.form.publishTimeType==2 && this.uploadAccount.length<=0 ){
              this.$message.error('未指定发布时间')
              return
            }
            // 如果是随机，进入计算
            if(this.form.publishTimeType==1){
              this.randomInfo()
            }
            else {
              this.form.accountGroupName=this.accountInfo.accountGroupName
              this.form.accountGroup=this.accountInfo.accountGroup
            }

            /* 在此判断：“发布账号”数量是否大于“选择文件夹”的数量（countNumber），大于则return提示 */
            console.log("this.uploadAccount.length",this.uploadAccount.length,'this.maxNum',this.maxNum)
            if(Number(this.uploadAccount.length) > Number(this.maxNum)){
              this.$message.error('你所选择的成品库的视频数量不能满足本次任务，请上传补全视频或调整任务')
              return
            }

            this.loading = true;



            Object.assign(this.form, {
              // 用户名
              username:this.$store.state.user.info.username,
              // 发布类型：1自研接口发布2H5发布
              publishType: 1
            })



            // 生成D音发布任务 debugger
            publishCreate(this.form)
              .then((data) => {
                this.uploadAccount = this.uploadAccount.map((item) => {
                  return{
                    ...item,
                    dyAccountId:item.id, //  发布账号ID
                    dyPublishId:data.data.id //  发布任务ID
                  }
                })
                this.publishAdds()
                //
              })
              .catch((e) => {
                this.loading = false;
                this.$message.error(e);
              });

          } else {
            this.$message.error(this.hint)
            return false;
          }
        });
      },
      // '随机' 给form的布局
      randomInfo(){
        // 清空总数据，重新计算
        this.uploadAccount=[]
        // 获取后N天日期 ‘发布天数’计算后年月日 dateList:年月日数组
        this.dateList = this.$sun.getLastOrNextFewDateBy(this.startDate,this.form.publishDays)
        // 集合 年月日 + 时分秒
        const timeList = []
        this.dateList.forEach(item => {
          // randomNum: 根据'每天发布数量' ，获取随机的时间time 例如：12:00:00
          let randomList = this.$sun.randomNum(this.dayData,this.form.dayCount)
          randomList.forEach(child => {
            timeList.push(item + ' ' + child + ':00') // 增加秒
          })
        })

        // 修改start（需修改）——测试完成，正确，需同步快手/抖音 共4个页面
        let list2=[]
        for(let i=0;i<this.selAccountList.length;i++){
          let account=this.selAccountList[i]
          for(let i=0;i<timeList.length;i++){
            var list ={}
            // 发布时间
            account.publishTime=timeList[i]
            account.productPolderId=this.form.projectId //选择文件夹id

            for (const key in account) {
              list[key] = account[key]
            }
            list2.push(list)
          }
          this.uploadAccount=list2
        }
        console.log("this.uploadAccount222测试",this.uploadAccount)


        // 修改end
        /*// selAccountList 为父组件传入的已赋值数据
        for(let i=0;i<timeList.length;i++){
          var list ={}
          for(let j=0;j<this.selAccountList.length;j++){
            this.selAccountList[j].publishTime=timeList[i]
            for (const key in this.selAccountList[j]) {
              list[key] = this.selAccountList[j][key]
            }
          }
          // 用户信息+时间All
          this.uploadAccount.push(list)
        }*/
      },
      /* 获取指定时间的发布账号 */
      getAccount(){
        if(this.form.publishTimeType!=2){
          return
        }
        let list2=[]
        // list 为父组件传入的已赋值数据
        for(let i=0;i<this.accountList.length;i++){
          let account=this.accountList[i]
          if(account.time){
            let selected=account.time.split(",")
            for(let i=0;i<selected.length;i++){
              var list ={}
              // 发布时间
              account.publishTime=selected[i]+':00'
              account.productPolderId=this.form.projectId //选择文件夹id

              for (const key in account) {
                list[key] = account[key]
              }
              list2.push(list)
            }
          }
          this.uploadAccount=list2
        }
      },
      // 清空发布任务数据
      dyClear(){
        this.$refs.form.resetFields()
        this.$nextTick(() => {
          this.$refs['connected'].init()
          this.$refs['connected'].clear()
          this.$refs['seoActies'].clear()
          this.$refs['user'].clear()
          // 不会重新刷新分组下的用户接口。即左侧数据也会清空
          this.$refs['account'].accountClear()

        })

        //清空商家简称和城市start
        this.provinceCity=''
        this.merchantName=''
        //end
        this.hint=''                // 修改1
        this.loading = false;
        // 清空 账号分组
        delete this.form.accountGroupName
        delete this.form.accountGroup
        // this.form.montageType=2 //恢复默认剪辑类型为‘口播剪辑’ ，需刷新组件
        // 清空 穿梭框 右侧的数据（value），以及穿梭框获取到的指定时间（uploadAccount） start
        this.uploadAccount=[]
        // 选择账号 指定——清空
        this.accountList=[]
        // 选择账号 随机——清空
        this.rightList=[]
        this.selAccountList=[]
        // 穿梭框数据清空
        this.accounts=[]
        this.value=[]
        this.stepsActive=0  // 步骤条归零
        // 清空用户数据
        delete this.form.aite
        this.form.aiteNickname= ''
        // end
      },
      //添加发布任务账号
      publishAdds(){
        publishAdd(this.uploadAccount)
          .then((data) => {
            this.dyClear()
            this.$message.success('发布成功！');
            // this.submitTo()
          })
          .catch((e) => {
            this.dyClear()
            this.$message.error(e);
          });
      },
      //  提交
      submitTo(){
        // <!-- * 1脚本剪辑 =AI剪辑 * 2自定义剪辑=口播剪辑 * 3图文剪辑-->
        const typeApi = this.form.montageType ==1 ? submitProjectJob : this.form.montageType ==2 ? submitDiyJob : submitImageJob
        // 判断 如果发布的视频条数，大于关联活动的最大值，则将值传默认最大值，否则则为发布的总视频条数
        let max = this.uploadAccount.length>this.maxNum ? this.maxNum : this.uploadAccount.length
        typeApi({
          id: this.form.projectId,//剪辑工程主键ID
          maximumCount:max, //剪辑工程所属用户
          username:this.$store.state.user.info.username
        })
          .then((data) => {
            this.dyClear()
            this.$message.success('发布成功！');
          })
          .catch((e) => {
            this.dyClear()
            this.$message.error(e);
          });
      }
    }
  };
</script>

<style lang="less" scoped>
  /*隐藏input（type=number)右边的小箭头*/
  /deep/.delInput input::-webkit-outer-spin-button,
  /deep/.delInput input::-webkit-inner-spin-button {
    -webkit-appearance: none!important;
  }
  /deep/.delInput input[type="number"]{
    -moz-appearance: textfield;
  }


  ::v-deep input::-webkit-outer-spin-button,
  ::v-deep input::-webkit-inner-spin-button {-webkit-appearance: none !important;
  }
  ::v-deep input[type='number'] {-moz-appearance: textfield !important;}
  .tiktok-title{
    font-size: 20px;
    margin-bottom: 30px;
    color: #000000;
  }
  .fit-title{
    color: #333333;
    font-size: 16px;
    margin:0px 10px 20px;
  }

  /*云创作成片库/云闪推成片库 style */
  .d-margin{
    margin-left: 38px;
    margin-bottom: 22px;
  }
  .title-class,.sel-title-class{
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 21px;
    min-width: 100px;
    padding: 0 15px;
    height: 35px;
    border-radius: 5px;
  }
  .title-class{
    color: #757575;
    background: #FAFAFC;
  }
  .sel-title-class{
    color: #1E6CEB;
    background: #DDF0FF;
  }
  /*end*/
  .account-all{
    border: 1px solid #D9D9D9;
    border-radius: 5px;
    position: relative;
    box-sizing: border-box;
    width: 156px;
    height: auto;
    margin-left: 10px;
    margin-bottom: 10px;
    .account-msg{
      background: #FAFAFC;
      img{
        width: 30px;
        height: 30px;
        border-radius: 50%;
        padding: 14px 0 12px;
      }
      div{
        text-align: center;
        width: calc(100% - 14px);
        color: #757575;
        padding:0 7px 7px;
      }
    }
    .is-appoint{
      color: #757575;
      font-size: 12px;
      padding: 8px 0;
      text-align: center;
    }
    .dropdown-class{
      position: absolute;
      top: 0;
      right: 5px;
    }
    i{
      font-size: 24px;
      color: #D9D9D9;
    }
  }
  .m-confirm{
    margin-top: 35px;
    margin-left: 10px;
  }
  .transfer-class {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .transfer-img{
      width: 30px;
      height: 30px;
      border-radius: 50%;
      margin-right: 15px;
    }
    .transfer-name{
      height: 30px;
      line-height: 30px;
    }
  }
</style>
